import React, { useState, useEffect } from "react";
import { useNavigate, useParams, useLocation } from "react-router-dom";
import "./index.less";
import LOGO from "@/assets/images/touxiang.png";
import diqiu from "@/assets/images/diqiu.png";
import { Button, message, Dropdown } from "antd"
import { useTranslation, Trans } from "react-i18next";
import { MenuOutlined, GlobalOutlined } from '@ant-design/icons';
import { useAccount } from 'wagmi';
import { useAppKitAccount, useAppKit, useAppKitNetwork, useWalletInfo } from "@reown/appkit/react";

const Header = ({ props }) => {
  const { t, i18n } = useTranslation();
  const loadtion = useLocation();
  const navigate = useNavigate();
  const { open, close } = useAppKit()
  const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()
  const { address, isConnected, caipAddress, status } = useAppKitAccount()

  const [langType, setLangType] = useState(window.sessionStorage.getItem("lang") === "cn" ? "cn" : "en");
  const [walletAddress, setWalletAddress] = useState("")


  const items1 = [
    {
      label: <div className={langType === "en" ? "active" : ""} onClick={() => changeLang("en")}>English</div>,
      key: '0',
    },
    {
      label: <div className={langType === "cn" ? "active" : ""} onClick={() => changeLang("cn")}>简体中文</div>,
      key: '1',
    },
  ];
  useEffect(() => {
    if (address) {
      setWalletAddress(address)
    } else {
      setWalletAddress("")
    }
  }, [address]) 
   useEffect(() => {
    console.log("loadtion",loadtion)
  }, [loadtion])
  const changeLang = (lang) => {
    i18n.changeLanguage(lang);
    window.sessionStorage.setItem("lang", lang)
    setLangType(lang)
  }
  const goWallet = () => {
    open()
  }
  const against = (t) => {
    if (!t) return "";
    return t.substring(0, 3) + "****" + t.substring(t.length - 4, t.length);
  };
  const goPage = (url) => {
    window.sessionStorage.setItem("once", 0);

    navigate(url)
  }
  
  return (
    <div className="header_box">
      <div className="nav_box">
        <div className="left_box">
          <img onClick={()=>window.location.href="https://deaieco.com/"} src={LOGO} alt="" />
          <div onClick={()=>window.location.href="https://deaieco.com/"}>DEAI</div>
        </div>
        <div className="center_box">
          <div className={loadtion.pathname === "/" || loadtion.pathname === "/rwa" || loadtion.pathname.indexOf("/rwamine") != -1 ? "item active" : "item"} onClick={() => goPage("/")}>{t("RWA")}</div>

        </div>
        <div className="right_box">
          {
            loadtion.pathname === "/destroy" ? "" : <Button className="btn" type="primary" onClick={goWallet}><div className="text">{address ? against(address) : t("Connect Wallet")}</div></Button>
          }

          <div className="lang_box">
            <Dropdown
              menu={{
                items: items1,
              }}
              trigger={['click']}
            >
                <img className="diqiu" src={diqiu} alt="" />
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
